$(function(){
    var canvas = $('#myCanvas');
    if(canvas.getContext) {
        console.log("ss");
    }else{
        // 画外圈
        four_circular();
        // 内部扇形
        fan_piece(6,150);
        //
        img()
    }
    // 绘制 4个外圈的圆
    function  four_circular(){
        // 绘制圆1
        circular("20",187,0,2*Math.PI,"#FF6C02")
        // 绘制圆2
        circular("14",175,0,2*Math.PI,"#F0ED99")
        // 绘制圆3
        circular("17",168,0,2*Math.PI,"#FFC68F")
        // 绘制圆4
        circular("10",154,0,2*Math.PI,"#FF740C")
         // 装饰圈
        circular("2",165,0,2*Math.PI,"#D7F5A4")
        // 装饰圈
        circular("2",171,0,2*Math.PI,"#D7F5A4")
    }
    // arc 圆角的绘制
    /**
     * @param {string} width 圆体线的宽度
     * @param {number} r 大小半径
     * @param {string} colour 颜色设置
     * @param {number} sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
     * @param {number} eAngle 颜色设置 结束角，以弧度计。
     */
    function circular(width,r,sAngle,eAngle,colour){
        // 设置文本 [0]
        var ctx = canvas[0].getContext("2d");
        // 获取canvas的宽度和高度 然后除2得到原点
        var w = ctx.canvas.width / 2;
        var h = ctx.canvas.height /2 ;
        // 弄条线
        ctx.beginPath();
        // 宽度是20
        ctx.lineWidth=width;
        // 200 200 这个中心点 187为大小 设置成圆
        ctx.arc(w,h,r,sAngle,eAngle);
        // 设置这个线的颜色
        ctx.strokeStyle=colour;
        // 绘制线
        ctx.stroke();
    }
    //绘制 内部扇片
    /**
     * @param {number} nums 一个圆分多少份
     * @param {number} r 半径是多少
     */
    function fan_piece(nums,r){
        // 设置文本 [0]
        var ctx = canvas[0].getContext("2d");
        // 获取canvas的宽度和高度 然后除2得到原点
        var w = ctx.canvas.width / 2;
        var h = ctx.canvas.height /2 ;
        /*分成几等分*/
        var num = nums;
        /*一份多少弧度*/ 
        // Math.PI == 180度
        var angle = Math.PI * 2 / num;
        /*上一次绘制的结束弧度等于当前次的起始弧度*/
        for (var i = 0; i < num; i++) {
            // i为第几个 然后乘长几个
            // 开始
            var startAngle = i * angle;
            // console.log(startAngle)
            // 结束
            var endAngle = (i + 1) * angle;
            // console.log(endAngle)
            // 绘制线
            ctx.beginPath();
            // 从那个点开始画
            ctx.moveTo(w, h);


            // 起点开始 然后半径是多少 开始位置 和结束弧度
            ctx.arc(w, h, r, startAngle, endAngle);
            /*背景颜色*/
            ctx.fillStyle = (i%2 == 0) ? '#FEF5CA':'#FFEDA3';
            // 填充当前的图像
            ctx.fill();


           
        }
    }

    function img(){
        var ctx = canvas[0].getContext("2d");
        
        var img = new Image()
        img.src = './img/shangpin/2.png'
        //图片加载完后，将其显示在canvas中
        img.onload = function(){
            ctx.save();
            ctx.beginPath();
            ctx.drawImage(this, 166,88,66,66)
            ctx.closePath();
            ctx.restore();
        }

    }

})

